<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>首页</title>
    <!--公共css-->
    <link rel="stylesheet" href="css/base.css">
    <!--本页面css-->
    <link rel="stylesheet" href="css/discount.css">
    <!--页脚-->
    <link rel="stylesheet" href="css/common.css">
    <!--mui css-->
    <link rel="stylesheet" href="lib/mui/css/mui.min.css">
</head>
<body>

<div class="layout">

    <!--客服-->
    <div class="customer">
        <a href="javascript:void(0);">
            <img src="images/index/customer.png" alt="">
            客服
        </a>
    </div>

    <!--头部-->
    <div class="head">
        <span class="mui-icon mui-icon-back" onclick="javascript :history.go(-1);"></span>
        <div class="title-img">
            <a href="/">
                <img src="images/discount/header_title.png" alt="">
            </a>
        </div>
    </div>


    <!--头部选项-->
    <div class="op-dv clearfix">
        <!--选项-->
        <ul class="sel-tab w clearfix" id="sel-tab">
            <li class="">加盟区域<i class="iconfont">&#xe600;</i></li>
            <li>投资金额<i class="iconfont">&#xe600;</i></li>
            <li>加盟类目<i class="iconfont">&#xe600;</i></li>
        </ul>
        <!--显示项-->
        <ul class="cont-nav" id="cont-nav">
            <li class="hide">
                <p>热门城市</p>
                <div class="sel-opt-box" id="sel-opt-box">

                </div>
            </li>
            <li class="hide">
                <p>投资金额</p>
                <div class="sel-opt-box">
                    <a href="javascript:void(0);">1-5万</a>
                    <a href="javascript:void(0);">5-10万</a>
                    <a href="javascript:void(0);">10-15万</a>
                    <a href="javascript:void(0);">15-20万</a>
                    <a href="javascript:void(0);">20-25万</a>
                    <a href="javascript:void(0);">25-30万</a>
                    <a href="javascript:void(0);">30-50万</a>
                    <a href="javascript:void(0);">50-100万</a>
                    <a href="javascript:void(0);">100万以上</a>
                </div>
            </li>
            <li class="hide">
                <p>热门类目</p>
                <div class="sel-opt-box sel-opt-box4">
                    <a href="javascript:void(0);">中餐</a>
                    <a href="javascript:void(0);">快餐</a>
                    <a href="javascript:void(0);">烧烤</a>
                    <a href="javascript:void(0);">小吃</a>
                    <a href="javascript:void(0);">面食</a>
                    <a href="javascript:void(0);">炸鸡</a>
                    <a href="javascript:void(0);">麻辣烫</a>
                    <a href="javascript:void(0);">酸菜鱼</a>
                </div>
                <p>其他类目</p>
                <div class="sel-opt-box sel-opt-box4">
                    <a href="javascript:void(0);">甜品</a>
                    <a href="javascript:void(0);">饮品</a>
                    <a href="javascript:void(0);">黄焖鸡</a>
                    <a href="javascript:void(0);">煲仔饭</a>
                </div>
            </li>
        </ul>
        <!--遮罩-->
        <div class="mask hide">

        </div>
    </div>

    <div class="content-box">
        <!--顶部图片-->
        <div class="top-img w">
            <a href="javascript:void(0);">
                <img src="images/project/top_img.png" alt="">
            </a>
        </div>

        <!--热门项目-->
        <div class="hot">
            <!--标题-->
            <ul class="hot-title w">
                <li>
                    热门项目
                </li>
            </ul>
            <!--内容-->
            <ul class="hot-cont">
                <li class="w">
                    <img src="images/project/hot01.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">韩巴巴炸鸡店</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <p>所属分类：<i>炸鸡</i></p>
                        <p><img src="images/project/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="images/project/hot02.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">暖小稻</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <p>所属分类：<i>黄焖鸡</i></p>
                        <p><img src="images/project/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="images/project/hot03.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">灶掌柜</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <span>现炒</span>
                        <p>所属分类：<i>家常菜</i></p>
                        <p><img src="images/project/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="images/project/hot04.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">湘口福酸菜鱼</h2>
                        <span>外卖</span>
                        <span>米饭</span>
                        <p>所属分类：<i>酸菜鱼</i></p>
                        <p><img src="images/project/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
            </ul>
            <a href="javascript:void(0);" class="load-more">加载更多项目</a>
        </div>
    </div>


    <!--页脚-->
    <footer>
        <div class="foot-logo">
            <a href="javascript:void(0);">
                <img src="images/index/foot-logo.png" alt="">
            </a>
            <div>
                <p>备案号：icp238594052</p>
                <p>官方联系方式：4000-000-000</p>
            </div>
        </div>
        <p>招商加盟网友情提示您：投资有风险，加盟需谨慎</p>
    </footer>

</div>

<!--rem-->
<script src="js/rem.js"></script>
<!--mui-->
<script src="lib/mui/js/mui.min.js"></script>
<!--jq-->
<script src="lib/jq/jquery-1.10.2.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/template-native.js"></script>


<script type="text/template" id="temp">
    <% for(var i = 0; i < data.length; i++){ %>
    <a href="javascript:void(0);"><%=data[i].name %></a>
    <% } %>
</script>


<script>
    $(function () {
        // tab切换

        $("#sel-tab").on("touchstart", "li", slideInOrOut)

        function slideInOrOut() {
            if ($(this).hasClass("sel-active")) {
                $(this).removeClass("sel-active").siblings().removeClass("sel-active")
                $(".mask").fadeOut()
            } else if (!$(this).hasClass("sel-active")) {
                $(this).addClass("sel-active").siblings().removeClass("sel-active")
                $(".mask").fadeIn()
            }
            $("#cont-nav li").eq($(this).index()).slideToggle().siblings().hide()
        }


        axios.get("http://api.wangshuwen.com/getRegion").then(
            res => {
                var dataRes = res.data
                var html = template("temp", dataRes)
                // console.log(html)
                $("#sel-opt-box").html(html)
            }
        )

    })
</script>
</body>
</html>
